<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
        <div id="app">
            <com1 v-bind:parentmsg="msg"></com1>
        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: '123 啊-父组件中的数据'
                },
                methods: {},
                components: {
                    // 结论：经过演示，发现，子组建中，默认无法访问到 父组件中的 data 上的数据
                    // 和 methods 中的方法
                    com1: {
                        // 注意：
                        // 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件
                        // 自身私有的，比如：子组件通过 ajax，请求回来的数据，都可以放到
                        // data 身上，
                        // data 上的数据，都是可读可写的；
                        data() {  
                            return {
                                title: '123',
                                content: 'qqq'
                            }
                        },
                        template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>',
                        // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
                        // props 中的数据，都是只读的，无法重新赋值

                        // 把父组件传递过来的 parentmsg 属性，先在 props 数据中，定义一下，
                        // 这样，才能使用这个数据
                        props: ['parentmsg'], 
                        directives: {},
                        filters: {},
                        components: {},
                        methods: {
                            change() {
                                this.parentmsg = '被修改了'
                            }
                        }
                    }
                }
            });
        </script>
    </body>
</html>